<%--
  Created by IntelliJ IDEA.
  User: SINGLEDOG
  Date: 2019/9/27
  Time: 16:03
  To change this template use File | Settings | File Templates.
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css">
    <script type="application/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <script type="application/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<div class="login-box" id="_j_login_box">
    <div class="inner inner_v2">
        <div class="inner_v2_left">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">账号密码登录</li>
                    <li>手机验证码登录</li>
                </ul>
                <div class="layui-tab-content" style="height: 100px;">
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form" action="${pageContext.request.contextPath}/login/normalLogin" method="post">
                            <div class="layui-form-item">
                                <div class="layui-inline"style="width: 100%!important;">
                                    <div class="layui-input-inline" style="width: 100%!important;">
                                        <input type="text" name="userAccount" lay-verify="required|phone" autocomplete="off" class="layui-input" placeholder="请输入账号" style="width: 85%!important;margin-left: 30px!important;">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item" style="height: 45px">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline" style="width: 100%!important;">
                                        <input type="password" name="userPassword" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input" style="width: 85%!important;margin-left: 30px!important;">
                                    </div>
                                </div>
                            </div>
                            <c:if test="${param.error==0}">
                                <span style="margin-left: 30px " class='text-danger'>用户名或密码错误!</span>
                            </c:if>

                            <div class="layui-form-item">
                                <div class="layui-input-block" style="width: 310px!important; margin: 0 auto!important;border-radius: 50px 0!important;">
                                    <button type="submit" class="btn layui-btn" lay-submit="" lay-filter="demo1" style="width: 100%" id="login">登录</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-tab-item">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline"style="width: 100%!important;">
                                    <div class="layui-input-inline" style="width: 100%!important;">
                                        <input type="text" id="userTel" name="userTel" lay-verify="required|phone" autocomplete="on" class="layui-input" placeholder="请输入手机号" style="width: 85%!important;margin-left: 30px!important;">
                                    </div>
                                </div>
                            </div>
                            <div class="get-code" style="height: 40px;width: 100%;">
                                <input class="get-code-number" data-limit="number" type="text" maxlength="6"
                                       placeholder="请输入验证码" id="code" name="code"
                                       onkeyup="this.value=this.value.replace(/\D/g,'')"
                                       onafterpaste="this.value=this.value.replace(/\D/g,'')"
                                        style="height: 40px;margin-left: 35px">
                                <input class="code-btn" id="btn" type="button" value="获取验证码" onclick="sendMessage()" style="height: 40px">

                            </div>
                            <div class="form-link" style="height: 20px;margin: 0 auto;"><a href="/forget">忘记密码</a></div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="width: 310px!important; margin: 0 auto!important;border-radius: 50px 0!important;">
                                    <button type="button" class="btn layui-btn" lay-submit="" lay-filter="demo1" style="width: 100%" id="login2">登录</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <%--<div class="connect">
                <p class="hd">用合作网站账户直接登录</p>
                <div class="bd">
                    &lt;%&ndash;<a href="/weibo" class="weibo"><img src="${pageContext.request.contextPath}/images/xinl_D.png"> 新浪微博</a>&ndash;%&gt;
                    <a href="/qq" class="qq"><img src="${pageContext.request.contextPath}/images/qq_D.png">QQ</a>
                    &lt;%&ndash;<a href="/wechat" class="weixin"><img src="${pageContext.request.contextPath}/images/wx_D.png">微信</a>&ndash;%&gt;
                    <div class="clear"></div>
                </div>
            </div>--%>
        </div>
        <div class="inner_v2_right">
            <img src="${pageContext.request.contextPath}/images/erweima1B.png">
            <p>扫一扫<br>下载逍遥游APP</p>
        </div>

    </div>
    <div class="bottom-link">
        还没有帐号?<a href="${pageContext.request.contextPath}/RegistLogin/regist.jsp">马上注册</a>
    </div>
</div>


<%--layui的提示--%>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });
    });
</script>
<%--选项卡--%>
<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });
</script>
<%--短信登录--%>
<%--<script>
    $("#a").click(function () {
        $("#form-a").css("display","block");
        $("#form-b").css("display","none");
        $("#b").css("color","black");
        $("#a").css("color","#3dbcc6");
        $(".ppp").css("display","block")
        $(".ddd").css("display","none")

    });
    $("#b").click(function () {
        $("#form-a").css("display","none");
        $("#form-b").css("display","block");
        $("#b").css("color","#3dbcc6");
        $("#a").css("color","black");
        $(".ddd").css("display","block")
        $(".ppp").css("display","none")

    })

</script>--%>


<script type="text/javascript">
    var sms = "";
    //发送验证码
    $("#btn").click(function() {
        var userTel = $("#userTel").val();
        if (userTel != "") {
            $.ajax({
                url : "${pageContext.request.contextPath}/login/getcode",  //发送请求  目标地址
                type : "post",  //POST方式传输
                data : {  //发送到服务器的数据
                    "userTel" : userTel
                },

                success : function(result) {
                    sms = result;
                    console.log("result:"+result);
                }
            });
        } else {
            alert("请输入手机号");
            return false;
        }
    });
    //点击登录
    $("#login2").click(function() {
        var code = $("#code").val();
        console.log("code:"+code);
        if (code == "") {
            alert("请输入验证码");
        } else {
            if (sms == code) {
                window.location.href = "${pageContext.request.contextPath}/index.jsp"
            } else {
                alert("验证码错误");
            }
            ;
        };
    });
</script>
<script type="text/javascript">
    var InterValObj; //timer变量，控制时间
    var count = 120; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    function sendMessage() {
        curCount = count;
        $("#btn").attr("disabled", "true");//发送验证码
        $("#btn").val(curCount + "秒后可重新发送");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次请求后台发送验证码 TODO
    }
    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#btn").removeAttr("disabled");//启用按钮
            $("#btn").val("重新发送验证码");
        } else {
            curCount--;
            $("#btn").val(curCount + "秒后可重新发送");
        }
    }
</script>
<div class="fullscreen-bg" style="background-image: url(https://images.mafengwo.net/images/signup/wallpaper/44.jpg;);"><img src="https://images.mafengwo.net/images/signup/wallpaper/44.jpg
" style="width: 1536px; height: 100%;"></div>
</body>
</html>
